<template>
  <div>
    <h3>{{ p.name }}</h3>
    <p>
      爱好：
      <span v-for="item in p.hobby" :key="item">{{ item }}</span>
    </p>
  </div>
</template>
<script>
export default {
  name: 'Item',
  props: ['p', 'count'],
  mounted() {
    console.log(this, 'item');
    console.log(this.p, 'item');
    // 切记，propse是制度属性，不允许修改
    // this.p = {};
    // this.count++;

    //但是会有人钻空子，如果一个数据是对象类型，我们不替换对象，而是修改了对象内部的属性
    // 其实也算是修改了prop，但是vue不会报错，因为地址没变，没有监听到props被修改
    // 不推荐使用这种做法
    // this.p.name += '...';
  },
};
</script>
<style></style>
